<template>
	<view class="conteList">
		<view class="CsuList" v-for="(item,index) in circleDataList">
			<view class="userINfo">
				<image class="userLofo" :src="staticPhoto+item.header_image" mode=""></image>
				<view class="">
					<view class="username">{{item.username}}</view>
					<view class="userTime">{{item.timestamp}}</view>
				</view>
			</view>
			<view class="conLs" v-if="item.content.text">
				{{item.content.text}}
			</view>
			<view class="Sfooter">
				<image  class="im" v-if="i" v-for="i in item.content.value" :src="staticCircle+i" mode=""></image>
			</view>
		</view>
		<!-- pages/exposure/index -->
		<navigator url="/pages/exposure/index" hover-class="navigator-hover">
			<view class="fabuConter" >
				<text style="font-size: 50rpx;padding-right: 10rpx;">+ </text>
				<text>发布	</text>
			</view>
		</navigator>
		
	</view>
</template>

<script>
	
	import {
		Request
	} from '@/utils/request.js';
	import _data from '../../common/_data';
	export default{
		data(){
			return {
				circleDataList:[],
			}
		},
		onShow() {
				this.circleComment();
		},
		computed:{
			staticPhoto () {
			  return _data.staticPhoto();
			},
			staticCircle(){
				return _data.staticCircle();
			}
		},
		methods:{
			circleComment(){
				Request('im/get/circleData',{
					time: 0,
					type: 0,
					user_id: 0,
					_agent_id: 1,
				},"POST").then((res)=>{
					this.circleDataList=res.data;
				})
			},
			
			// /im/circle/comment
		}
	}
</script>

<style >
	.fabuConter{
		width: 288rpx;
		height: 88rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		background: #256FF3;
		box-shadow: 0rpx 20rpx 40rpx 1rpx rgba(37,111,243,0.3);
		border-radius: 44rpx 44rpx 44rpx 44rpx;
		text-align: center;
		position: fixed;
		bottom: 50rpx;
		font-weight: 500;
		font-size: 32rpx;
		color: #FFFFFF;
		left: 50%;
		transform: translate(-50%);
	}

	.conteList{
		padding: 0 24rpx;
		padding-bottom:180rpx;
	}
	.CsuList {
		padding: 24rpx 0;
	}
	.conteList .userLofo{
		width: 72rpx;
		height: 72rpx;
		margin-right: 12rpx;
		border-radius: 16rpx 16rpx 16rpx 16rpx;
	}
	.conteList .userINfo{
		display: flex;
		align-items: center;
	}
	.userTime,.username{
		font-family: PingFang SC, PingFang SC;
		font-weight: 400;
		font-size: 22rpx;
		color: #9298A0;
		line-height: 36rpx;
		text-align: left;
		font-style: normal;
		text-transform: none;
	}
	.conLs{
		font-family: PingFang SC, PingFang SC;
		font-weight: 400;
		font-size: 28rpx;
		color: #181D24;
		line-height: 42rpx;
		padding: 24rpx 0;
		text-align: left;
		font-style: normal;
		text-transform: none;
	}
	.Sfooter{
		display: flex;
		align-items: center;
		flex-wrap: wrap;
	}
	.Sfooter .im {
		margin-right: 18rpx;
		margin-bottom: 18rpx;
		width: 222rpx;
		height: 222rpx;
		border-radius: 16rpx 16rpx 16rpx 16rpx;
	}
	.Sfooter .im:nth-child(3n){
		margin-right: 0;
	}
</style>